<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- action:找服务器的地址的 -->
    <!-- 
        当文本框获取焦点的是,让文本框的背景颜色 => springgreen
        当密码框获取焦点的时候,让密码框的背景颜色 => springgreen

        当文本框失去焦点的是,让文本框的背景颜色 => #fff
        当密码框失去焦点的时候,让密码框的背景颜色 => #fff

        账号的长度在10~16之间
        密码的长度在6~12之间

        当账号和密码不合法规范的 提醒 => 账号格式有误,密码格式有误
        当账号和密码符合规范的 提醒 => 账号检验正确,密码校验正确

        当账号和密码都校验正确得到是,可以提交登录,否则阻止提交(账号密码不符合规范)
     -->
    <form action="http://www.baidu.com">
        账号: <input type="text"><span></span><br>
        密码: <input type="password"><span></span><br>
        <input type="submit" value="登录">
    </form>
    <script>
        //账号的开关
        var flaga = false;
        //密码的开关
        var flagp = false;

        var account = document.querySelector("input[type=text]")
        var pwd = document.querySelector("input[type=password]")
        var form = document.querySelector("form")
        var span = document.querySelectorAll("span")

        // 当文本框获取焦点的是,让文本框的背景颜色 => springgreen
        // 当密码框获取焦点的时候,让密码框的背景颜色 => springgreen
        account.onfocus = function(){
            this.style.background = "springgreen"
        }
        pwd.onfocus = function(){
            this.style.background = "springgreen"
        }
        // 当文本框失去焦点的是,让文本框的背景颜色 => #fff
        // 当密码框失去焦点的时候,让密码框的背景颜色 => #fff
        account.onblur = function(){
            this.style.background = "#fff"
        }
        pwd.onblur = function(){
            this.style.background = "#fff"
        }
        /* 输入文本 
             当账号和密码不合法规范的 提醒 => 账号格式有误,密码格式有误
             当账号和密码符合规范的 提醒 => 账号检验正确,密码校验正确
        */
        account.oninput = function(){
            var val = this.value;
            //当我输入账号的时候,val.length > 10 && val.length < 16,提示账号检验正确
            if(val.length > 10 && val.length < 16){
                span[0].innerHTML = "账号检验正确"
                span[0].style.color = "green"
                //打开账号的开关
                flaga = true;
            }else{
                span[0].innerHTML = "账号格式有误"
                span[0].style.color = "red"
                //关闭账号的开关
                flaga = false;
            }
        }
        pwd.oninput = function(){
            var val = this.value;
            //当我输入账号的时候,val.length > 10 && val.length < 16,提示账号检验正确
            if(val.length > 6 && val.length < 12){
                span[1].innerHTML = "密码校验正确"
                span[1].style.color = "green"
                //打开密码的开关
                flagp = true;
            }else{
                span[1].innerHTML = "密码格式有误"
                span[1].style.color = "red"
                //关闭密码的开关
                flagp = false;
            }
        }

        /* 
            1. 在什么时候需要判断账号和密码符合规范?
                登录的时候
            2. 如何判断账号密码都符合规范
                设置两个开关 默认是 关
                    var flaga = false;
                    var flagp = false;
                    账号符合的时候,那么就flaga = true 否则就false
                    账号符合的时候,那么就flagp = true 否则就false
        */
        form.onsubmit = function(){
            // console.log(flaga,flagp);
            if(!(flaga && flagp)){
                //阻止表单提交
                return false;
            }
        }
    </script>
</body>
</html>